본문으로 건너뛰기

Styled-Components

Styled-Components 소개​

Styled-Components는 CSS를 JavaScript 안에서 직접 작성할 수 있게 해주는 라이브러리입니다. React 컴포넌트 안에서 스타일을 정의하고, 이를 컴포넌트에 쉽게 적용할 수 있습니다. 이는 CSS-in-JS라고 불리는 방식으로, 스타일을 컴포넌트에 국한시키고, 스타일 충돌을 방지하는 데 매우 유용합니다.

Styled-Components의 설치​

먼저, 프로젝트에 Styled-Components를 설치해야 합니다. 다음 명령어를 사용하세요:

npm install styled-components

기본 사용법​

Styled-Components를 사용하면, styled 객체를 통해 스타일이 적용된 컴포넌트를 생성할 수 있습니다. 예를 들어, 버튼을 스타일링해보겠습니다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;

  &:hover {
    background-color: #45a049;
  }
`;

const App = () => {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

export default App;

위 코드에서 Button은 스타일이 적용된 컴포넌트입니다. CSS 스타일은 백틱() 안에 작성됩니다. &:hover`는 버튼에 마우스를 올렸을 때의 스타일을 정의합니다.

동적 스타일링​

Styled-Components는 props를 이용해 동적으로 스타일을 변경할 수 있습니다. 다음 예시를 보세요:

const Button = styled.button`
  background-color: ${props => props.primary ? '#4CAF50' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  border: 2px solid #4CAF50;
  padding: 10px 20px;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.primary ? '#45a049' : '#f1f1f1'};
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  );
}

export default App;

여기서 Button 컴포넌트는 primary prop에 따라 배경색과 글자색이 달라집니다. 이처럼 Styled-Components는 매우 유연하게 스타일을 지정할 수 있습니다.

ThemeProvider 사용하기​

Styled-Components는 ThemeProvider를 제공하여 전체 앱에서 공통의 테마를 사용할 수 있도록 합니다. 이를 통해 일관된 디자인을 유지할 수 있습니다.

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: '#4CAF50',
  secondaryColor: '#f1f1f1'
};

const Button = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.theme.secondaryColor};
    color: black;
  }
`;

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button>Themed Button</Button>
      </div>
    </ThemeProvider>
  );
}

export default App;

위 예제에서 ThemeProvider는 theme 객체를 전달합니다. 이를 통해 Button 컴포넌트는 테마에 정의된 색상을 사용할 수 있습니다.

더 알아보기​

  • CSS-in-JS: JavaScript 안에서 CSS를 작성하는 방식에 대한 추가 정보.
  • ThemeProvider: 테마를 활용하여 일관된 스타일을 유지하는 방법.
  • Props: 컴포넌트에 동적 데이터를 전달하는 방법.

내용 요약​

Styled-Components는 React에서 스타일을 관리하는 강력한 도구입니다. CSS를 JavaScript 안에서 직접 작성하여 컴포넌트별로 스타일을 정의하고, props를 통해 동적으로 스타일을 변경할 수 있습니다. 또한, ThemeProvider를 사용하여 전체 앱에 일관된 테마를 적용할 수 있습니다. Styled-Components를 활용하면 스타일 충돌을 방지하고, 유지 보수가 쉬운 코드를 작성할 수 있습니다.